<template>
  <div class="photoinfo-container">
    <h3>{{getphotoinfo.title}}</h3>
    <p class="subtitle">
      <span>发表时间:{{getphotoinfo.add_time | dateformat}}</span>
      <span>点击{{getphotoinfo.click}}次</span>
    </p>

    <hr>

    <!-- 缩略图部分 -->
    <div class="thumbs">
      <vue-preview :list="list" ></vue-preview>
    </div>
    <!-- 图片内容区域 -->
    <div class="content" v-html="getphotoinfo.content"></div>
    <cmt :id="id"></cmt>
  </div>
</template>
<script>
import comment from '../subcomponents/Comment.vue';
export default {
  data() {
    return {
      id:this.$route.params.id,
      getphotoinfo:{},
      list:[]
    }
  },
  methods: {
    getPhotoInfo(){
      this.$http.get('api/getimageInfo/'+this.id).then(result=>{
        if(result.body.status === 0) {
          // console.log(result.body)
          this.getphotoinfo = result.body.message[0]
        }
      })
    },
    getThumbs(){
      this.$http.get('api/getthumimages/'+this.id).then(result=>{
        if(result.body.status === 0){
          console.log(result.body)
          this.list = result.body.message;
          this.list.forEach(item => {
            item.w = 600,
            item.h = 400,
            item.msrc = item.src
          });
        }
      })
    }
  },
  created(){
    this.getPhotoInfo(),
    this.getThumbs()
  },
  components:{
    'cmt':comment
  }
}
</script>
<style lang="scss" scoped>
  .photoinfo-container{
    padding: 3px;
    h3{
      color: #26a2ff;
      text-align: center;
      margin: 15px 0;
    }
    .subtitle {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
    }
  }
</style>